<template>
    <div class="bj">
        <div class="title">{{ $t('message.System', { msg: title }) }}</div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div style="position: relative;">
                <el-form-item label="" prop="pass">
                    <el-input prefix-icon="el-icon-user" type="" placeholder="请输入用户名" v-model="ruleForm.username"
                        autocomplete="off"></el-input>
                    <div :class="checkUsename ? 'check' : 'none'">{{$t("message.enteroneusername")}}</div>
                </el-form-item>
                <el-form-item label="" prop="checkPass">
                    <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" :type="flag ? 'password' : ''"
                        v-model="ruleForm.password" autocomplete="off"></el-input>
                    <svg-icon class="svg" @click="flag = !flag" :icon-class="flag ? 'eye' : 'eye-open'" />
                    <div :class="checkPass ? 'check' : 'none'">{{$t("message.Pleaseenterpassword")}}</div>
                </el-form-item>
                <el-form-item>
                    <el-button class="bottom" style="" type="primary" @click="submitForm('ruleForm')">{{$t("message.Login")}}</el-button>
                </el-form-item>
                <div class="tip">
                    <span style="margin-right: 18px">{{$t("message.UsernameJobID")}}</span>
                    <span>{{$t("message.PasswordInitialize")}}</span>
                </div>
            </div>

        </el-form>
    </div>
</template>

<script>
import global from '@/global';

export default {
    name: 'indexNew',
    data() {
        return {
            title:global.title,
            redirect: null,
            otherQuery: null,
            flag: true,
            checkUsename: false,
            checkPass: false,
            ruleForm: {
                username: "",
                password: "",
            },
        };
    },
    watch: {
        $route: {
            handler: function (route) {
                const query = route.query;
                if (query) {
                    this.redirect = query.redirect;
                    this.otherQuery = this.getOtherQuery(query);
                }
            },
            immediate: true,
        },
    },
    created() {
    },
    methods: {
        getOtherQuery(query) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== "redirect") {
                    acc[cur] = query[cur];
                }
                return acc;
            }, {});
        },
        submitForm() {
            if (!this.ruleForm.username) {
                this.checkUsename = true
                this.checkPass = false
                return
            }
            if (!this.ruleForm.password) {
                this.checkPass = true
                this.checkUsename = false
                return
            }
            this.checkUsename = false
            this.checkPass = false
            this.$store.dispatch("user/login", this.ruleForm).then(() => {
                // alert('3333')
                this.$router.push('/');
            }).catch(() => {
                this.$notify({
                    title: "登录失败，用户名或密码错误",
                    dangerouslyUseHTMLString: true,
                    message: "",
                    type: "error",
                });
                // this.loading = false;
            });
        },
    }
};
</script>

<style scoped lang="scss">
.bj {
    width: 100%;
    height: 100%;
    background-image: url('../../assets/imgs/bjhome.jpg');
    background-size: cover;
    position: relative;
    .title{
        width: 450px;
        color: rgba(4, 179, 232, 0.913);
        font-size: 32px;
        transform: translate(5vw,14vh);
    }
}

.demo-ruleForm {
    position: absolute;
    width: 15vw;
    top: 19vh;
    right: 10vw;
    border: 1px solid blue;
    padding: 4vw 2vw;
    box-sizing: content-box;

    .bottom {
        border-color: rgba(30, 30, 130, 0.865);
        width: 100%;
        background-color: rgba(44, 44, 204, 0.865);
    }

    /deep/ input {
        border-color: rgba(30, 30, 130, 0.865);
        background-color: #0e0e8569;
        color: #ffffff;
    }

    .svg {
        position: absolute;
        right: 0.3vw;
        top: 1vh;
        color: rgb(46, 46, 132);
    }

    .none {
        display: none;
    }

    .check {
        color: red;
        top: 30px;
        position: absolute;
        font-size: 12px;
    }

    /deep/ .el-form-item__content {
        margin-left: 0 !important;
    }

    .tip {
        color: aliceblue;
        font-size: 12px;
        position: absolute;
        top: 160px;


    }
}
</style>
